<template>
  <div >
    <a-button class="btn_" v-if="back&&isView" type="primary"   @click="onBack">返回</a-button>
    <a-button class="btn_" v-if="addData" type="primary" icon="plus-circle"  @click="onAdd"> {{addText?addText:'新增'}} </a-button>
    <a-button class="btn_" v-if="delectData" type="primary" icon="close-circle"  @click="onDelect"> 批量删除 </a-button>
    <a-button class="btn_" v-if="optData" type="primary" icon="menu-unfold"  @click="onOpt"> {{optData}} </a-button>
    <a-button class="btn_" v-if="importData" type="primary" icon="vertical-align-top"  @click="onImport"> 导入数据 </a-button>
    <a-button class="btn_" v-if="exportData" type="primary" icon="vertical-align-bottom"  @click="onExport"> 下载 </a-button>
    <!-- <span class="btn_">
      <slot name="cusBtn"></slot>
    </span> -->
    <slot name="cusBtn"></slot>
  </div>
</template>

<script>
export default {
  props:{
    addData:{
      type:Boolean,
      default:false
    },
    addText:{
      type:String,
      default:null
    },
    delectData:{
      type:Boolean,
      default:false
    },
    importData:{
      type:Boolean,
      default:false
    },
    exportData:{
      type:Boolean,
      default:false
    },
    optData:{
      type:String,
      default:null
    },
    //除主页面的其它地方可以不显示返回
    isView:{
      type:Boolean,
      default:true
    }

  },
  data() {
    return {
      back:false,
      pathName:'',
    }
  },
  watch: {
    $route: {
        handler: function (to, from) {
          // console.log(to, from);
          //created事件触发的函数可以在这里写...  
          this.pathName=this.$route.params.pathName
          if(this.$route.params.isJump){
            this.back=true
          }else{
            this.back=false
          }
          
        },
        deep: true,
        immediate:true
    }
  },
  mounted(){
    // console.log(this.$route);
    // this.routeName=this.$route.name
  },
  methods:{
      onBack(){
        // this.$router.go(-1)
        this.$router.push({ 
          name: this.pathName, 
          params: {
            isBack:true,
          } 
        })
      },
      onAdd(){
          console.log('onAddData');
          this.$emit('onAddData')
      },
      onDelect(){
          console.log('onDelectData');
          this.$emit('onDelectData')
      },
      onImport(){
          console.log('onImportData');
          this.$emit('onImportData')
      },
      onExport(){
          console.log('onExportData');
          this.$emit('onExportData')
      },
      onOpt(){
        console.log('onOptData');
        this.$emit('onOptData')
      }

  }
}
</script>

<style scoped>
.btn_{
    margin-right: 14px;
    
}
</style>

// //跳转返回用法：
// //源页面data初始化：
    // isJump:false,
// //源页面路由跳转用法：
    // this.isJump=true
    // this.$router.push({ 
    //   name: 'supplierInfo', 
    //   params: {
    //     isJump:this.isJump ,
    //     pathName:this.$route.name,
    //     keHuPid: record.gongYinsPid 
    //   } 
    // })
// //源页面监听路由方法：
  watch: {
    $route: {
        handler: function (val, oldVal) {
          console.log(this.$route.name); 
          console.log(this.$route.meta);  
          //判断是进入该页面还是离开
          if (this.$route.name=='supplierInfo') {
            //读取该页面是否缓存，未缓存时：
            if (!this.$route.meta.keepAlive) {
              //读取页面初始状态
              if(this.$route.meta.zhuangTai){
                this.q_formDatas.zhuangTai=this.$route.meta.zhuangTai
              }
              this.getTotal()
              this.getList(this.q_formDatas)
            }else{
              console.log(this.$route.params.isBack);
              //已缓存时判断是否是返回
              if (!this.$route.params.isBack) {
                this.getTotal()
                this.getList(this.q_formDatas)
              }
              this.isJump=false
            }
          }
        },
        deep: true,
        immediate:true
    }
  },
//源页面导航守卫
  // beforeRouteLeave(to,from,next){
  //   if (this.isJump) {
  //     from.meta.keepAlive=true
  //   }else{
  //     from.meta.keepAlive=false
  //   }
  //   next();
  // },
// //目标页面监听路由方法：(目标页面若要返回到源页面需引用本组件才会显示返回按钮)
  // watch: {
  //   $route: {
  //       handler: function (val, oldVal) {
  //         //created事件触发的函数可以在这里写... 
  //         //读取页面初始状态
  //         if(this.$route.meta.zhuangTai){
  //           this.q_formDatas.zhuangTai=this.$route.meta.zhuangTai
  //         }
  //         //读取页面跳转传参
  //         if(this.$route.params.keHuPid){
  //           this.q_formDatas.keHuPid=this.$route.params.keHuPid
  //         }
  //         this.getTotal()
  //         this.getList(this.q_formDatas)
  //       },
  //       deep: true,
  //       immediate:true
  //   }
  // },
// //目标页面又是源页面是的监听路由方法：(目标页面若要返回到源页面需引用本组件才会显示返回按钮)
  // watch: {
  //   $route: {
  //       handler: function (val, oldVal) {
  //         console.log(this.$route.name); 
  //         console.log(this.$route.meta);  
  //         //判断是进入该页面还是离开
  //         if (this.$route.name=='supplierInfo') {
  //           //读取该页面是否缓存，未缓存时：
  //           if (!this.$route.meta.keepAlive) {
  //             //读取页面初始状态
  //             if(this.$route.meta.zhuangTai){
  //               this.q_formDatas.zhuangTai=this.$route.meta.zhuangTai
  //             }
  //             //读取页面跳转传参
  //             if(this.$route.params.keHuPid){
  //               this.q_formDatas.keHuPid=this.$route.params.keHuPid
  //             }
  //             this.getTotal()
  //             this.getList(this.q_formDatas)
  //           }else{
  //             console.log(this.$route.params.isBack);
  //             //已缓存时判断是否是返回
  //             if (!this.$route.params.isBack) {
  //               this.getTotal()
  //               this.getList(this.q_formDatas)
  //             }
  //             this.isJump=false
  //           }
  //         }
  //       },
  //       deep: true,
  //       immediate:true
  //   }
  // },